<template>
  <div>
    <q-tree
      dense
      ref="myMenuTreeRef"
      :nodes="nodes"
      node-key="id"
      label-key="label"
      selected-color="primary"
      tick-strategy="leaf"
      v-model:ticked="tickArr"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, PropType, computed, watch, onMounted } from 'vue';
import { menuTreeItem } from 'stores/model';
import { cataItem } from 'src/hook/common/useCatalogType';

export default defineComponent({
  name: 'PermissionTree',
  components: {},
  props: {
    nodes: {
      type: Array as PropType<menuTreeItem[]>,
      require: true
    },
    tickOption: {
      type: Array as PropType<number[]>,
      default: () => {}
    }
  },
  emits: ['update:tick-option'],
  setup (props, context) {
    //数据解构
    const {
      nodes,
      tickOption
    } = toRefs(props);

    //树ref
    let myMenuTreeRef = ref(null);

    //勾选列表
    let tickArr = computed({
      get: () => {
        return tickOption.value;
      },
      set: (tick: number[]) => {
        context.emit('update:tick-option', tick);
      }
    });


    return {
      nodes,
      myMenuTreeRef,
      tickArr
    };
  }
});
</script>

<style lang="scss" scoped>
  //q-expansion-item
  .main-menu{
    .q-item {
      min-height: 35px;
    }
  }

  //q-expansion-item隐藏展开图标项
  .hide-icon {
    display: inline;
  }
</style>
